<template>
  <div>
    <el-card header="无编辑效果" shadow="never">
      <CyEditTable class="edit-table" :data="tableData" border>
        <CyEditTableColumn prop="date" label="时间"> </CyEditTableColumn>
        <CyEditTableColumn prop="name" label="姓名"> </CyEditTableColumn>
        <CyEditTableColumn prop="address" label="地址"> </CyEditTableColumn>
      </CyEditTable>
    </el-card>
  
    <el-card header="可编辑效果 & 新增效果 " shadow="never" style="margin-top:20px">
      <CyEditTable ref="addEditTableRef" class="edit-table" edit :data="tableData" border>
        <CyEditTableColumn prop="date" label="时间">
          <template #edit="{ row }">
            <el-input v-model="row.date" ></el-input>
          </template>
        </CyEditTableColumn>
        <CyEditTableColumn prop="name" label="姓名">
          <template #edit="{ row }">
            <el-input v-model="row.name" ></el-input>
          </template>
        </CyEditTableColumn>
        <CyEditTableColumn prop="address" label="地址">
          <template #edit="{ row }">
            <el-input v-model="row.address" ></el-input>
          </template>
        </CyEditTableColumn>
        <CyEditTableColumn label="修改">
          <template #default="{ actions, $index }">
            <el-button @click="actions.startEditable($index)">修改</el-button>
            <el-button @click="actions.deleteRow($index)">删除</el-button>
          </template>
          <template #edit="{ actions, $index }">
            <el-button @click="actions.saveEditable($index)">保存</el-button>
            <el-button @click="actions.cancelEditable($index)">取消</el-button>
            <el-button @click="actions.deleteRow($index)">删除</el-button>
          </template>
        </CyEditTableColumn>
      </CyEditTable>
      <el-button type="primary" @click="addEditTableRef?.editActions.addRow()" style="margin-top:10px">新增</el-button>
    </el-card>
    <el-card header="表单校验效果 & 获取编辑结果" shadow="never" style="margin-top:20px" >
      <CyEditTable ref="formEditTableRef" class="edit-table" :data="tableData" border>
        <CyEditTableColumn
          prop="date"
          label="时间"
          :rules="[{ required: true, message: '时间是必填项', trigger: 'blur' }]"
        >
          <template #edit="{ row }">
            <el-input v-model="row.date" ></el-input>
          </template>
        </CyEditTableColumn>
        <CyEditTableColumn
          prop="name"
          label="姓名"
          :rules="[{ required: true, message: '姓名是必填项', trigger: 'blur' }]"
        >
          <template #edit="{ row }">
            <el-input v-model="row.name" ></el-input>
          </template>
        </CyEditTableColumn>
        <CyEditTableColumn
          prop="address"
          label="地址"
          :rules="[{ required: true, message: '地址是必填项', trigger: 'blur' }]"
        >
          <template #edit="{ row }">
            <el-input v-model="row.address" ></el-input>
          </template>
        </CyEditTableColumn>
        <CyEditTableColumn label="修改">
          <template #default="{ actions, $index }">
            <el-button @click="actions.startEditable($index)">修改</el-button>
            <el-button @click="actions.deleteRow($index)">删除</el-button>
          </template>
          <template #edit="{ actions, $index }">
            <el-button @click="actions.saveEditable($index)">保存</el-button>
            <el-button @click="actions.cancelEditable($index)">取消</el-button>
            <el-button @click="actions.deleteRow($index)">删除</el-button>
          </template>
        </CyEditTableColumn>
      </CyEditTable>
      <el-button type="primary" @click="formEditTableRef?.editActions.addRow()" style="margin-top:10px">新增</el-button>
      <div class="result-wrapper" style="margin-top:10px">
        <p>获取数据: </p> <p>{{ formEditTableRef?.resultData }}</p> </div>
    </el-card>
 

  </div>
</template>

<script setup>
import CyEditTable from '_c/editTable/editTable.vue'
import CyEditTableColumn from '_c/editTable/editTableColumn.vue'
import { onMounted, ref } from 'vue'
const addEditTableRef=ref()
const formEditTableRef=ref()
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
onMounted(() => {
  // addEditTableRef.value.editActions.startEditable()
});
</script>

<style lang="scss" scoped></style>